<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Bootstrap -->
    <link href="../style/bootstrap-4.6.0-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    #celan_div{
        background-color: rgb(84,199,211);
        text-align: center;
    }
    h2{
        color: #FBFBFB;
        font-size: 30px;
        font-family:Franklin Gothic Medium;
        font-weight:bold;
        margin-top: 27px;
    }
    #beij_div2{
        background-color: rgb(84,199,211);
        padding-top: 10px;
    }
    #beij_div3{
        background-color: rgb(84,199,211);
        border-left:thick solid #f8f9fa;
    }
    #app{
        background-color: rgb(61,73,85);
        height: 666px;
    }
    #rou_div{
        height: 97px;
    }
    #beij_div{
        background-color: rgb(248,244,240);
        height: 666px;
    }
    .hello_p{
        color: #f8f9fa;
        margin-top: 20px;
        font-size: 20px;
        font-weight: bold;
    }
    /*滚动条样式 */
    .menu {
        height: 500px;
        padding: 0px;
        overflow: auto;
    }
    #card_id{
        text-align: center;
        font-size: 25px;
        background-color: rgb(61,73,85);
    }
    li{
        list-style: none;
        color: #c8cbcf;
        text-align: center;
        cursor: pointer;
        font-size: 20px;
        line-height: 50px;
    }
    li:hover{
        background: #86cfda;
    }

    #card_div{
        padding: 0px;
    }
    #tou_img{
        width:50px;
        height: 50px;
        border-radius: 30px;
        margin-top: 7px;
        margin-left: 25px;
    }
    #tou_p{
        display: inline-block;
        margin-top: 20px;
        font-size: 25px;
        color: #FBFBFB;
        font-family: STXinwei;
    }
    .lie_ul{
        padding: 0px;
    }
    body{
        height: 100%;
    }
    #beij_div3 a{
        color: #FBFBFB;
        font-size: 18px;
        margin-left: 5px;
    }
    .active{
        background:#ed969e;
    }

</style>
<body>
    <div id="menu">
        <!--   row   一行  -->
        <div class="row" id="rou_div">
            <div class="col-xl-2" id="celan_div">
                <h2>华域商城系统</h2>
            </div>
            <div class="col-xl-8" id="beij_div2">
                <p class="hello_p">-->您好，欢迎登录华域商城购物中心！</p>
            </div>
            <div class="col-xl-2" id="beij_div3">
                <p id="tou_p">yang</p>
                <a class="btn btn-outline-secondary" href="../UserController/logout">退出</a>
            </div>
        </div>

        <!--   row   一行  -->
        <div class="row">
            <div class="col-xl-2 menu" id="app">
                <div id="accordion">

                    <div class="card" id="card_id" v-for="i in map">
                        <div class="card-header">
                            <a id="a_name" style="color: white" class="card-link" data-toggle="collapse" :href="'#menu'+i.menuId">
                                {{i.menuName}}&nbsp;&nbsp;>
                            </a>
                        </div>
                        <div :id="'menu' + i.menuId" class="collapse hide" data-parent="#accordion">
                            <div class="card-body" id="card_div">
                                <ul class="lie_ul">
                                    <li id="menu_li" style="color: white" v-for="(m,index) in i.subMenu" @click="openMenu(m.menuFilePath,index)"
                                        :class="{active: currentIndex == index}">
                                        {{ m.menuName}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xl-10" id="beij_div">
            <!-- 内容主体区域 <iframe>内联框架,用于在网页内显示网页   frameborder=0 关闭边框-->
                <div style="padding: 15px; height: 100%">
                    <iframe style="height: 100%" frameborder = 0 id = "content-iframe" width = "100%"></iframe>
                </div>
            </div>
        </div>
    </div>

    <script src="../style/jquery-3.3.1.js"></script>
    <script src="../style/bootstrap-4.6.0-dist/js/bootstrap.js"></script>
    <script src="../style/vue.js"></script>
    <script>
        $(function (){
            let map = selMenu();
            let a = new Vue({
                el: '#menu',
                data: {
                    map: map.menuList,
                    currentIndex:-1, //设置初始下标
                },
                methods: {// iframe内容展示
                    openMenu: function (url,index) {
                        // 使用jquery设置iframe标签的src路径
                        $("#content-iframe").attr("src", url);
                        this.currentIndex = index;//点击li更换背景颜色
                    }
                }
            })
        })
        function selMenu(){
            let map= [];
            $.ajax({
                type:"post",
                url:"../MenuController/selMenu",
                dataType:"json",
                async: false,
                success:function (data){
                    map=data;
                }
            })
            return map;
        }
    </script>




</body>
</html>